<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
                <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                    <el-form-item label="用户编号" prop="id">
                        <el-input class="w-[280px]" v-model="queryParams.id" />
                    </el-form-item>
                    <el-form-item label="用户SN" prop="sn">
                        <el-input class="w-[280px]" v-model="queryParams.sn" />
                    </el-form-item>
                    <el-form-item label="手机厂商" prop="provider">
                        <el-input class="w-[280px]" v-model="queryParams.provider" />
                    </el-form-item>
                    <el-form-item label="用户类型" prop="user_type">
                        <el-select
                            v-model="queryParams.user_type"
                            class="w-[280px]"
                            clearable
                        >
                            <el-option label="全部" value="-1" />
                            <el-option label="普通用户" value="1" />
                            <el-option label="vip用户" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否拉黑" prop="user_type">
                        <el-select
                            v-model="queryParams.is_black"
                            class="w-[280px]"
                            clearable
                        >
                            <el-option label="全部" value="-1" />
                            <el-option label="已拉黑" value="1" />
                            <el-option label="未拉黑" value="0" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="投放账号" prop="account_id">
                        <el-input class="w-[280px]" v-model="queryParams.account_id" />
                    </el-form-item>
                    <el-form-item label="外推编号" prop="source_id">
                        <el-input class="w-[280px]" v-model="queryParams.source_id" />
                    </el-form-item>
                    <el-form-item label="应用标识" prop="package_name">
                        <el-input class="w-[280px]" v-model="queryParams.package_name" />
                    </el-form-item>
                    <el-form-item label="城市信息" prop="city_info">
                        <el-input class="w-[280px]" v-model="queryParams.city_info" />
                    </el-form-item>
                    <el-form-item label="落地页类型" prop="is_jump">
                        <el-select
                            v-model="queryParams.is_jump"
                            class="w-[280px]"
                            clearable
                        >
                            <el-option label="全部" value="-1" />
                            <el-option label="短剧" value="1" />
                            <el-option label="工具" value="2" />
                            <el-option label="小说" value="3" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <daterange-picker
                            class="w-[280px]"
                            v-model:startTime="queryParams.start_time"
                            v-model:endTime="queryParams.end_time"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="resetPage">查询</el-button>
                        <el-button @click="resetParams">重置</el-button>
                    </el-form-item>
                </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">

            <el-table
                class="mt-4"
                size="large"
                v-loading="pager.loading"
                :data="pager.lists"
            >
                <el-table-column label="用户编号" prop="id" min-width="90" />
<!--                <el-table-column label="用户SN" show-overflow-tooltip prop="sn" min-width="100" />-->
                <el-table-column label="用户类型" prop="user_type" min-width="100">
                    <template #default="{ row }">
                        <div class="flex gap-2">
                            <el-tag v-if="row.user_type == 1" type="primary">普通用户</el-tag>
                            <el-tag v-if="row.user_type == 2"  type="primary">vip用户</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="投放账号" show-overflow-tooltip prop="account_id" min-width="125">
                    <template #default="{ row }">
                        <el-button
                            v-perms="['client:recharge_report:list']"
                            type="success"
                            link
                            @click="handleAccountClick(row.account_id)"
                        >
                            {{ row.account_id }}
                        </el-button>
                    </template>
                </el-table-column>
<!--                <el-table-column label="外推编号" show-overflow-tooltip prop="source_id" min-width="100" />-->
                <el-table-column label="落地页类型" show-overflow-tooltip prop="is_jump" min-width="110">
                    <template #default="{ row }">
                        <div class="flex gap-2">
                            <el-tag v-if="row.is_jump == 1" type="primary">短剧</el-tag>
                            <el-tag v-if="row.is_jump == 2"  type="primary">工具</el-tag>
                            <el-tag v-if="row.is_jump == 3"  type="primary">小说</el-tag>
                        </div>
                    </template>
                </el-table-column>
<!--                <el-table-column label="应用标识" show-overflow-tooltip  prop="package_name" min-width="100" />-->
                <el-table-column label="手机厂商" prop="provider" min-width="100" />
                <el-table-column label="币" prop="coin_buy" min-width="100">
                    <template #default="{ row }">
                        <div class="flex gap-2">
                            <span class="text-primary">{{ row.coin_buy + row.coin_gift}}</span>
                        </div>
                    </template>
                </el-table-column>
<!--                <el-table-column label="币-赠送" prop="coin_gift" min-width="100" />-->
<!--                <el-table-column label="注册IP" show-overflow-tooltip prop="register_ip" min-width="100" />-->
                <el-table-column label="城市信息" show-overflow-tooltip prop="city_info" min-width="100" />
                <el-table-column label="创建时间" show-overflow-tooltip prop="create_time" min-width="100" />
                <el-table-column label="最后登录时间" show-overflow-tooltip prop="last_login_time" min-width="100" />
                <el-table-column label="操作" width="160" fixed="right">
                    <template #default="{ row }">
                        <el-button v-perms="['client:read_records:list']" type="primary" link>
                            <router-link :to="{
                                        path: getRoutePath('client:read_records:list'),
                                        query: {
                                            uid: row.id,
                                        }
                                    }">
                                观看记录
                            </router-link>
                        </el-button>
                        <el-button
                            v-if="row.is_black != 1"
                            v-perms="['client:client_user:del']"
                            type="danger"
                            link
                            @click="handleDelete(row.id)"
                        >
                            拉黑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup
            v-if="showEdit"
            ref="editRef"
            @success="getLists"
            @close="showEdit = false"
        />
    </div>
</template>
<script lang="ts" setup name="user">
import { userDelete, userLists } from '@/api/client/client_user'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import { getRoutePath } from '@/router'
import { format } from 'date-fns'
const { query } = useRoute()
const today = format(new Date(), 'yyyy-MM-dd')
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const showEdit = ref(false)
const queryParams = reactive({
    id: String(query?.uid || ""),
    sn: '',
    provider: '',
    source_id: '',
    user_type: '-1',
    is_jump: '-1',
    is_black: '-1',
    account_id: String(query?.account_id || ""),
    package_name: '',
    register_ip: '',
    city_info: '',
    start_time: today,
    end_time: today,
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: userLists,
    params: queryParams
})


const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}

const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getDetail(data)
}

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要拉黑用户吗？')
    await userDelete({ id })
    feedback.msgSuccess('拉黑成功')
    getLists()
}

const router = useRouter()
const handleAccountClick = (accountId: string) => {
    router.push({
        path: getRoutePath('client:recharge_report:list'),
        query: {
            account_id: accountId
        }
    })
}

getLists()
</script>
